<template>
  <div>
      <div class="model">
          <div class="model-title">
              <h2>实时热门资讯</h2>
          </div>
          <div>
              <div class="model-news">
                  <swiper v-if="newListStatus && newList.length > 6" class="swiper" :options="swiperOption">
                      <swiper-slide v-for="(item,index) in newList" :key="index" class="item">
                          <div>
                              <p>{{item.title}}</p>
                              <span>
                                  <svg-icon class="svg" name="eye"></svg-icon>
                                  {{item.num}}
                              </span>
                          </div>
                      </swiper-slide>
                  </swiper>
                  <div v-if="newListStatus && newList.length < 6">
                      <div v-for="(item,index) in newList" :key="index" class="item">
                          <div>
                              <p>{{item.title}}</p>
                              <span>
                                  <svg-icon class="svg" name="eye"></svg-icon>
                                  {{item.num}}
                              </span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <newInfoWindow v-if="newWindowStatus" :id="id" :info="info" @windowClose="windowClose" />
  </div>
</template>
<script>
    import newInfoWindow from '@/components/window/window2'
    import {getInfoList} from '@/api/park'

    export default {
    data() {
        return {
            form: {
                year: ''
            },
            newList: [],
            newListStatus: false,
            swiperOption: {
                freeMode: true,
                loop: true,
                direction: 'vertical',
                speed: 1500,
                //自动轮播
                autoplay: 2000,
                autoplayDisableOnInteraction: false,
                //开启循环模式
                autoHeight: true,
                slidesPerView: 6
            },
            newWindowStatus: false,
            id: '',
            info: ''
        }
    },
    components: {
        newInfoWindow
    },
    methods: {
        async getInfoList(form) {
            if (form.year === '') return
            this.newList = await getInfoList({
                year: form.year
            })
            this.newListStatus = true
        },
        HandShowInfo(item) {
            this.info = item
            this.newWindowStatus = true
        },
        windowClose() {
            this.newWindowStatus = false
        }
    },
    watch: {
        '$store.state.app.year': {
            handler: function (nVal, oVal) {
                this.form.year = nVal
                this.getInfoList(this.form);
            },
            immediate: true
        }

    }
}
</script>
<style scoped lang="scss">
.model {
    padding: .4vw;
    background: url('../../assets/x1/modal_2_header.png') no-repeat top left, url('../../assets/x1/modal_2_footer.png') no-repeat bottom left;
    background-size: 100% auto;
}

.model-title {
    padding: screenVw(1) 0 0;

    h2 {
        text-align: center;
        color: #78dffd;
        font-size: screenVw(1.2);
    }
}
.model-news{
    height: 12.5vw;
    max-width: 34vw;
    overflow: hidden;
    padding: screenVw(0.5) 0;

    .item {
        position: relative;
        color: #50EEFF;
        font-size: screenVw(.9);
        padding: .4vw .6vw .4vw 2vw;
        cursor: pointer;

        p {
            display: inline-block;
            width: 84%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }

        span {
            display: flex;
            align-items: center;
            width: 12%;
            float: right;
            text-align: right;

            .svg {
                width: 2vw;
                height: 1vw;
            }
        }
    }

    .item:before {
        content: "";
        position: absolute;
        top: 50%;
        left: .8vw;
        width: 0;
        height: 0;
        transform: translate(0, -38%);
        border-top: .4vw solid transparent;
        border-bottom: .4vw solid transparent;
        border-left: .4vw solid #78dffd;
    }

}

.swiper {
    height: 12.5vw;
}

</style>
